<template>
	<view class="container">
		<!-- 时间选择器区域 -->
		<view class="time-selector">
			<view class="selector-label">选择时间:</view>
			<picker mode="date" :value="selectedDate" @change="onDateChange">
				<view class="time-display">{{ selectedDateDisplay }}</view>
			</picker>
			<picker mode="time" :value="selectedTime" @change="onTimeChange" :fields="'hour'">
				<view class="time-display">{{ selectedHour }}:00</view>
			</picker>
			<view class="action-buttons">
				<button class="back-current-btn" @click="backToCurrent">回到当前</button>
				<button class="refresh-btn" @click="refreshData">刷新数据</button>
				<picker mode="selector" :range="nodeOptions" :value="selectedNodeIndex" @change="onNodeChange">
					<view class="node-selector">{{ nodeOptions[selectedNodeIndex] }}</view>
				</picker>
			</view>
		</view>
		
		<!-- 标签切换栏 -->
		<view class="tab-bar">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index" 
				:class="['tab-item', { active: currentTab === index }]"
				@click="switchTab(index)"
			>
				{{ tab.name }}
			</view>
		</view>
		
		<!-- 图表显示区域 -->
		<view class="charts-container">
			<!-- 温度图表 -->
			<view v-if="currentTab === 0" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">温度图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(0)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="tempOpts" :chartData="tempChartData" :ontouch="true" style="height: 350px;" />
			</view>
			
			<!-- 湿度图表 -->
			<view v-if="currentTab === 1" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">湿度图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(1)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="humiOpts" :chartData="humiChartData" :ontouch="true" style="height: 350px;" />
			</view>
			
			<!-- co2值图表 -->
			<view v-if="currentTab === 2" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">co2值图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(2)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="phOpts" :chartData="phChartData" :ontouch="true" style="height: 350px;" />
			</view>
			
			<!-- 紫外线图表 -->
			<view v-if="currentTab === 3" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">紫外线图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(3)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="uvOpts" :chartData="uvChartData" :ontouch="true" style="height: 350px;" />
			</view>
			
			<!-- 土壤湿度图表 -->
			<view v-if="currentTab === 4" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">土壤湿度图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(4)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="soilOpts" :chartData="soilChartData" :ontouch="true" style="height: 350px;" />
			</view>
			
			<!-- 雨水图表 -->
			<view v-if="currentTab === 5" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">雨水图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(5)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="rainOpts" :chartData="rainChartData" :ontouch="true" style="height: 350px;" />
			</view>
			
			<!-- 光照图表 -->
			<view v-if="currentTab === 6" class="chart-wrapper">
				<view class="chart-header">
					<text class="chart-title">光照图表 ({{ selectedDateDisplay }} {{ selectedHour }}:00-{{ (selectedHour + 1) % 24 }}:00)</text>
					<button class="detail-btn" @click="goToDetailChart(6)">查看详情</button>
				</view>
				<qiun-data-charts type="line" :opts="lightOpts" :chartData="lightChartData" :ontouch="true" style="height: 350px;" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 当前选中的标签
			currentTab: 0,
			// 标签配置
			tabs: [
				{ name: '温度', key: 'temp' },
				{ name: '湿度', key: 'humi' },
				{ name: 'co2值', key: 'ph' },
				{ name: '紫外线', key: 'uv' },
				{ name: '土壤湿度', key: 'soil' },
				{ name: '雨水', key: 'rain' },
				{ name: '光照', key: 'light' }
			],
			// 认证令牌
			token: '',
			// 数据刷新定时器
			dataTimer: null,
			
			// 时间选择器相关
			selectedDate: '',
			selectedTime: '00:00',
			selectedHour: 0,
			selectedDateDisplay: '',
			
			// 节点选择相关
			nodeOptions: ['所有节点', '节点1', '节点2', '节点3'],
			selectedNodeIndex: 0,
			selectedNodeId: null, // null表示所有节点
			
			// 完整的一天数据存储
			fullDayData: [],
			
			// 温度图表数据
			tempChartData: {
				categories: [],
				series: [{
					name: '温度',
					data: []
				}]
			},
			tempOpts: {
				color: ["#1890FF"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			
			// 湿度图表数据
			humiChartData: {
				categories: [],
				series: [{
					name: '湿度',
					data: []
				}]
			},
			humiOpts: {
				color: ["#aaff00"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			
			// co2值图表数据
			phChartData: {
				categories: [],
				series: [{
					name: 'co2值',
					data: []
				}]
			},
			phOpts: {
				color: ["#ff6600"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			
			// 紫外线图表数据
			uvChartData: {
				categories: [],
				series: [{
					name: '紫外线',
					data: []
				}]
			},
			uvOpts: {
				color: ["#9966ff"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			
			// 土壤湿度图表数据
			soilChartData: {
				categories: [],
				series: [{
					name: '土壤湿度',
					data: []
				}]
			},
			soilOpts: {
				color: ["#8B4513"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			
			// 雨水图表数据
			rainChartData: {
				categories: [],
				series: [{
					name: '雨水',
					data: []
				}]
			},
			rainOpts: {
				color: ["#0099ff"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			},
			
			// 光照图表数据
			lightChartData: {
				categories: [],
				series: [{
					name: '光照',
					data: []
				}]
			},
			lightOpts: {
				color: ["#ffcc00"],
				padding: [25, 25, 15, 25],
				enableScroll: true,
				legend: {},
				xAxis: {
					disableGrid: true,
					rotateLabel: true,
					scrollShow: true,
					itemCount: 10,
					scrollAlign: "right"
				},
				yAxis: {
					gridType: "dash",
					dashLength: 2
				},
				extra: {
					line: {
						type: "straight",
						width: 2,
						activeType: "hollow"
					}
				}
			}
		}
	},
	
	onLoad(options) {
		// 初始化图表数据，确保数据结构正确
		this.initChartData();
		
		// 处理图表组件可能的错误
		this.handleChartErrors();
		
		// 设置默认选择当前日期和小时
		const now = new Date();
		this.selectedHour = now.getHours();
		this.selectedTime = this.selectedHour.toString().padStart(2, '0') + ':00';
		this.selectedDate = now.getFullYear() + '-' + 
						   (now.getMonth() + 1).toString().padStart(2, '0') + '-' + 
						   now.getDate().toString().padStart(2, '0');
		this.selectedDateDisplay = (now.getMonth() + 1) + '月' + now.getDate() + '日';
		
		// 从本地存储中读取tab参数（用于从index页面跳转过来的情况）
		const savedTabIndex = uni.getStorageSync('chartTabIndex');
		if (savedTabIndex !== undefined && savedTabIndex !== null && savedTabIndex !== '') {
			this.currentTab = parseInt(savedTabIndex) || 0;
			// 读取后清除存储，避免影响后续操作
			uni.removeStorageSync('chartTabIndex');
		}
		// 如果有传入tab参数，设置当前标签（保留原有URL参数支持）
		if (options && options.tab !== undefined) {
			this.currentTab = parseInt(options.tab) || 0;
		}
		// 获取可用节点列表
		this.loadAvailableNodes();
		// 获取token
		this.getToken();
		// 开始数据刷新
		this.startDataRefresh();
	},
	
	onShow() {
		// 页面显示时重新开始数据刷新
		this.startDataRefresh();
	},
	
	onHide() {
		// 页面隐藏时停止数据刷新
		this.stopDataRefresh();
	},
	
	onUnload() {
		// 页面卸载时停止数据刷新
		this.stopDataRefresh();
	},
	
	methods: {
		// 日期选择器变化事件
		onDateChange(e) {
			const dateValue = e.detail.value;
			this.selectedDate = dateValue;
			// 更新日期显示格式
			const date = new Date(dateValue);
			this.selectedDateDisplay = (date.getMonth() + 1) + '月' + date.getDate() + '日';
			// 重新加载选定日期的数据
			this.loadChartData();
		},
		
		// 时间选择器变化事件
		onTimeChange(e) {
			const timeValue = e.detail.value;
			this.selectedTime = timeValue;
			this.selectedHour = parseInt(timeValue.split(':')[0]);
			// 重新过滤并显示选定小时的数据
			this.filterHourlyData();
		},
		
		// 手动刷新数据
		refreshData() {
			this.loadChartData();
			uni.showToast({
				title: '数据已刷新',
				icon: 'success',
				duration: 1500
			});
		},
		
		// 节点选择变化事件
		onNodeChange(e) {
			const index = e.detail.value;
			this.selectedNodeIndex = index;
			// 设置选中的节点ID，0表示所有节点
			if (index === 0) {
				this.selectedNodeId = null; // 所有节点
			} else {
				// 从节点选项中提取实际的节点ID
				const selectedOption = this.nodeOptions[index];
				// 提取"节点 xxx"中的xxx部分
				const nodeIdMatch = selectedOption.match(/节点\s+(.+)/);
				if (nodeIdMatch) {
					this.selectedNodeId = nodeIdMatch[1];
				} else {
					this.selectedNodeId = null;
				}
			}
			// 重新加载数据
			this.loadChartData();
			
			uni.showToast({
				title: index === 0 ? '显示所有节点数据' : `显示${this.nodeOptions[index]}数据`,
				icon: 'success',
				duration: 1500
			});
		},
		
		// 获取可用节点列表
		loadAvailableNodes() {
			var that = this;
			
			// 调用云函数获取所有数据，用于提取节点ID
			uniCloud.callFunction({
				name: 'getHistoryData',
				data: {
					queryType: 'getLatest',
					limit: 100 // 获取更多数据以确保包含所有节点
				},
				success: function(res) {
					console.log("获取节点列表数据成功", res);
					
					let dataList = [];
					
					// 兼容云端和本地云函数的不同数据结构
					if (res.result && res.result.code === 0 && res.result.data && res.result.data.dataList) {
						// 本地云函数结构
						dataList = res.result.data.dataList;
					} else if (res.result && Array.isArray(res.result)) {
						// 云端云函数结构（直接返回数组）
						dataList = res.result;
					} else if (Array.isArray(res.result)) {
						// 其他可能的数组结构
						dataList = res.result;
					}
					
					// 提取所有唯一的node_id
					let nodeIds = new Set();
					dataList.forEach(item => {
						if (item.node_id) {
							nodeIds.add(item.node_id);
						}
					});
					
					// 更新节点选项
					let nodeOptions = ['所有节点'];
					Array.from(nodeIds).sort().forEach(nodeId => {
						nodeOptions.push(`节点 ${nodeId}`);
					});
					
					that.nodeOptions = nodeOptions;
					console.log("可用节点列表:", nodeOptions);
				},
				fail: function(error) {
					console.log("获取节点列表失败", error);
					// 使用默认节点选项
					that.nodeOptions = ['所有节点', '节点1', '节点2', '节点3'];
				}
			});
		},
		
		// 过滤指定小时的数据
		filterHourlyData() {
			if (!this.fullDayData || this.fullDayData.length === 0) {
				console.log('没有可用的全天数据');
				return;
			}
			
			console.log('全天数据样本:', this.fullDayData.length > 0 ? this.fullDayData[0] : '无数据');
			console.log('全天数据总数:', this.fullDayData.length);
			
			// 清空所有图表数据
			this.clearAllChartData();
			
			// 过滤选定日期和小时的数据
			const selectedDateTime = new Date(this.selectedDate);
			const filteredData = this.fullDayData.filter(item => {
				const itemTime = new Date(item.timestamp);
				return itemTime.getFullYear() === selectedDateTime.getFullYear() &&
					   itemTime.getMonth() === selectedDateTime.getMonth() &&
					   itemTime.getDate() === selectedDateTime.getDate() &&
					   itemTime.getHours() === this.selectedHour;
			});
			
			console.log('过滤条件:', {
				selectedDate: this.selectedDate,
				selectedHour: this.selectedHour,
				selectedDateTime: selectedDateTime
			});
			console.log('过滤后的数据数量:', filteredData.length);
			if (filteredData.length > 0) {
				console.log('过滤后的数据样本:', filteredData[0]);
			}
			
			// 更新图表数据
			filteredData.forEach(item => {
				const time = new Date(item.timestamp);
				const timeStr = time.getHours().toString().padStart(2, '0') + ':' + 
							   time.getMinutes().toString().padStart(2, '0');
				
				// 更新各个图表数据
            this.addChartDataPoint('temp', parseFloat(item.temperature) || 0, timeStr);
            this.addChartDataPoint('humi', parseFloat(item.humidity) || 0, timeStr);
            this.addChartDataPoint('ph', parseFloat(item.ph) || 0, timeStr);
            this.addChartDataPoint('uv', parseFloat(item.uv) || 0, timeStr);
            this.addChartDataPoint('soil', parseFloat(item.soil) || 0, timeStr);
            this.addChartDataPoint('rain', parseFloat(item.rain) || 0, timeStr);
            this.addChartDataPoint('light', parseFloat(item.light) || 0, timeStr);
            
            console.log('添加数据点:', {
                temp: parseFloat(item.temperature) || 0,
                humi: parseFloat(item.humidity) || 0,
                ph: parseFloat(item.ph) || 0,
                uv: parseFloat(item.uv) || 0,
                soil: parseFloat(item.soil) || 0,
                rain: parseFloat(item.rain) || 0,
                light: parseFloat(item.light) || 0,
                time: timeStr
            });
			});
			
			console.log(`已过滤${this.selectedDateDisplay} ${this.selectedHour}:00时段的数据，共${filteredData.length}条`);
		},
		
		// 切换标签
		switchTab(index) {
			this.currentTab = index;
			// 切换标签时不需要重新加载数据，因为所有数据已经加载完成
		},
		
		// 跳转到详细图表页面
		goToDetailChart(chartIndex) {
			const chartPages = [
				'../LineChartTemp/LineChartTemp',    // 0: 温度
				'../LineChartHumi/LineChartHumi',    // 1: 湿度
				'../LineChartPH/LineChartPH',        // 2: pH值
				'../LineChartUV/LineChartUV',        // 3: 紫外线
				'../LineChartSoil/LineChartSoil',    // 4: 土壤湿度
				'../LineChartRain/LineChartRain',    // 5: 雨水
				'../LineChartLight/LineChartLight'   // 6: 光照
			];
			
			if (chartIndex >= 0 && chartIndex < chartPages.length) {
				uni.navigateTo({
					url: chartPages[chartIndex],
					success: function() {
						console.log('导航成功');
					},
					fail: function(err) {
						console.error('导航失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		},
		
		// 获取token
		getToken() {
			var that = this;
			uni.request({
				url: 'https://iam.cn-south-4.myhuaweicloud.com/v3/auth/tokens',
				data: {
					"auth": {
						"identity": {
							"methods": ["password"],
							"password": {
								"user": {
									"name": "jun",
									"password": "junjjxiaoxiaode6cm!",
									"domain": {
										"name": "hid_5qb4jhtria1zq1j"
									}
								}
							}
						},
						"scope": {
							"project": {
								"name": "cn-south-4"
							}
						}
					}
				},
				method: 'POST',
				header: { 'content-type': 'application/json' },
				timeout: 10000,
				enableHttp2: false,
				enableQuic: false,
				success: function(res) {
					that.token = res.header['X-Subject-Token'];
					uni.setStorageSync('token', that.token);
					console.log("获取token成功");
					// 获取token后立即加载云数据库数据
					that.loadChartData();
				},
				fail: function(err) {
					console.log("获取token失败", err);
					// 检查是否是网络连接问题
					if (err.errMsg && err.errMsg.includes('ERR_PROXY_CONNECTION_FAILED')) {
						console.log("网络连接失败，请检查网络设置");
						uni.showToast({
							title: '网络连接失败',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
		},
		
		// 获取指定日期的云数据库数据
		getRecentDayData() {
			var that = this;
			
			// 调用云函数获取指定日期的数据
			let requestData = {
				queryType: 'getByDate',
				targetDate: this.selectedDate
			};
			
			// 如果选择了特定节点，添加node_id参数
			if (this.selectedNodeId) {
				requestData.node_id = this.selectedNodeId;
			}
			
			uniCloud.callFunction({
				name: 'getHistoryData',
				data: requestData,
				success: function(res) {
					console.log("获取指定日期数据成功", res);
					
					let dataList = [];
					
					// 兼容云端和本地云函数的不同数据结构
					if (res.result && res.result.code === 0 && res.result.data && res.result.data.dataList) {
						// 本地云函数结构
						dataList = res.result.data.dataList;
					} else if (res.result && Array.isArray(res.result)) {
						// 云端云函数结构（直接返回数组）
						dataList = res.result;
					} else if (Array.isArray(res.result)) {
						// 其他可能的数组结构
						dataList = res.result;
					}
					
					if (dataList.length > 0) {
						// 保存完整的指定日期数据
						that.fullDayData = dataList;
						
						// 过滤并显示选定小时的数据
						that.filterHourlyData();
						
						console.log("图表数据更新完成，指定日期共", dataList.length, "条数据");
					} else {
						console.log("暂无指定日期的数据");
						uni.showToast({
							title: '暂无该日期的数据',
							icon: 'none'
						});
						// 清空图表数据
						that.clearAllChartData();
					}
				},
				fail: function(error) {
					console.log("获取指定日期数据失败", error);
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 清空所有图表数据
		clearAllChartData() {
			this.tempChartData.categories = [];
			this.tempChartData.series[0].data = [];
			
			this.humiChartData.categories = [];
			this.humiChartData.series[0].data = [];
			
			this.phChartData.categories = [];
			this.phChartData.series[0].data = [];
			
			this.uvChartData.categories = [];
			this.uvChartData.series[0].data = [];
			
			this.soilChartData.categories = [];
			this.soilChartData.series[0].data = [];
			
			this.rainChartData.categories = [];
			this.rainChartData.series[0].data = [];
			
			this.lightChartData.categories = [];
			this.lightChartData.series[0].data = [];
		},
		
		// 添加图表数据点
		addChartDataPoint(type, value, timeStr) {
			let chartData;
			
			switch(type) {
				case 'temp':
					chartData = this.tempChartData;
					break;
				case 'humi':
					chartData = this.humiChartData;
					break;
				case 'ph':
					chartData = this.phChartData;
					break;
				case 'uv':
					chartData = this.uvChartData;
					break;
				case 'soil':
					chartData = this.soilChartData;
					break;
				case 'rain':
					chartData = this.rainChartData;
					break;
				case 'light':
					chartData = this.lightChartData;
					break;
				default:
					return;
			}
			
			// 添加新数据点
			chartData.categories.push(timeStr);
			chartData.series[0].data.push(value);
		},
		
		// 加载图表数据
		loadChartData() {
			this.getRecentDayData();
		},
		
		// 开始数据刷新
		startDataRefresh() {
			this.stopDataRefresh(); // 先停止之前的定时器
			this.dataTimer = setInterval(() => {
				this.loadChartData();
			}, 60000); // 每60秒刷新一次（优化性能）
		},
		
		// 停止数据刷新
		stopDataRefresh() {
			if (this.dataTimer) {
				clearInterval(this.dataTimer);
				this.dataTimer = null;
			}
		},
		
		// 初始化图表数据
		initChartData() {
			// 确保所有图表数据都有正确的初始结构
			const chartTypes = ['tempChartData', 'humiChartData', 'phChartData', 'uvChartData', 'soilChartData', 'rainChartData', 'lightChartData'];
			const chartNames = ['温度', '湿度', 'co2值', '紫外线', '土壤湿度', '雨水', '光照'];
			
			chartTypes.forEach((chartType, index) => {
				if (!this[chartType] || !this[chartType].categories || !this[chartType].series) {
					this[chartType] = {
						categories: [],
						series: [{
							name: chartNames[index] || '数据',
							data: []
						}]
					};
				}
			});
		},
		
		// 处理图表组件错误
		handleChartErrors() {
			// 修复uni.getSystemInfoSync的问题
			try {
				// 确保系统信息获取方法存在
				if (typeof uni.getSystemInfoSync === 'function') {
					// 尝试获取系统信息，如果失败则使用备用方法
					const systemInfo = uni.getSystemInfoSync();
					if (!systemInfo || !systemInfo.platform) {
						// 如果获取失败，设置默认值
						console.warn('系统信息获取失败，使用默认配置');
					}
				}
			} catch (error) {
				console.warn('系统信息获取异常:', error);
			}
		},
		
		// 回到当前时间
		backToCurrent() {
			const now = new Date();
			const year = now.getFullYear();
			const month = (now.getMonth() + 1).toString().padStart(2, '0');
			const day = now.getDate().toString().padStart(2, '0');
			const hour = now.getHours();
			
			// 设置为当前日期和时间
			this.selectedDate = `${year}-${month}-${day}`;
			this.selectedHour = hour;
			this.selectedTime = `${hour.toString().padStart(2, '0')}:00`;
			
			// 更新日期显示格式
			this.selectedDateDisplay = (now.getMonth() + 1) + '月' + now.getDate() + '日';
			
			// 重新加载数据
			this.loadChartData();
			
			uni.showToast({
				title: '已回到当前时间',
				icon: 'success',
				duration: 1500
			});
		}
	}
}
</script>

<style scoped>
/* 图表页面 - 苹果设计风格 */
.container {
	padding: 24rpx;
	background: linear-gradient(135deg, #f2f2f7 0%, #e5e5ea 100%);
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
	position: relative;
}

.container::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 20% 80%, rgba(0, 122, 255, 0.1) 0%, transparent 50%),
				radial-gradient(circle at 80% 20%, rgba(52, 199, 89, 0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

/* 时间选择器 - 苹果风格 */
.time-selector {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16rpx;
	position: relative;
	z-index: 1;
}

.time-selector::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #007aff 0%, #5ac8fa 50%, #34c759 100%);
	border-radius: 24rpx 24rpx 0 0;
}

.selector-label {
	font-size: 32rpx;
	color: #1d1d1f;
	font-weight: 700;
	min-width: 120rpx;
	letter-spacing: -0.3rpx;
}

.time-display {
	padding: 16rpx 24rpx;
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
	border: 1px solid rgba(0, 122, 255, 0.1);
	border-radius: 16rpx;
	font-size: 30rpx;
	color: #1d1d1f;
	font-weight: 600;
	min-width: 140rpx;
	text-align: center;
	margin: 0 8rpx;
	transition: all 0.3s ease;
	letter-spacing: 0.3rpx;
}

.time-display:hover {
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(52, 199, 89, 0.05) 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.15);
}

.refresh-btn {
	padding: 16rpx 24rpx;
	background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(52, 199, 89, 0.3);
	transition: all 0.3s ease;
	letter-spacing: 0.5rpx;
	min-width: 120rpx;
	min-height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.refresh-btn:hover {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 16rpx rgba(52, 199, 89, 0.4);
}

.refresh-btn:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(52, 199, 89, 0.3);
}

/* 按钮容器 */
.action-buttons {
	display: flex;
	gap: 16rpx;
	align-items: center;
}

/* 节点选择器 */
.node-selector {
	padding: 16rpx 24rpx;
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s ease;
	letter-spacing: 0.5rpx;
	min-width: 120rpx;
	min-height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.node-selector:hover {
	background: linear-gradient(135deg, #0056cc 0%, #007aff 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.4);
}

.node-selector:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}

/* 回到当前按钮 */
.back-current-btn {
	padding: 16rpx 24rpx;
	background: linear-gradient(135deg, #ff9500 0%, #ffb340 100%);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 26rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.3);
	transition: all 0.3s ease;
	letter-spacing: 0.5rpx;
	min-width: 120rpx;
	min-height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-current-btn:hover {
	background: linear-gradient(135deg, #e6850e 0%, #ff9500 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 16rpx rgba(255, 149, 0, 0.4);
}

.back-current-btn:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(255, 149, 0, 0.3);
}

/* 标签栏 - 苹果风格 */
.tab-bar {
	display: flex;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	padding: 8rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.tab-item {
	flex: 1;
	min-width: 100rpx;
	padding: 20rpx 16rpx;
	text-align: center;
	font-size: 26rpx;
	color: #8e8e93;
	border-radius: 18rpx;
	transition: all 0.3s ease;
	margin: 4rpx;
	font-weight: 500;
	letter-spacing: 0.3rpx;
	position: relative;
	overflow: hidden;
}

.tab-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tab-item:hover::before {
	opacity: 1;
}

.tab-item:hover {
	color: #007aff;
	transform: translateY(-2rpx);
}

.tab-item.active {
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
	transform: translateY(-2rpx);
}

.tab-item.active::before {
	opacity: 0;
}

/* 图表容器 - 苹果风格 */
.charts-container {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.charts-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(90deg, #007aff 0%, #5ac8fa 50%, #34c759 100%);
	border-radius: 24rpx 24rpx 0 0;
}

.chart-wrapper {
	min-height: 400px;
	height: auto;
	margin: 24rpx 0;
	border-radius: 20rpx;
	overflow: visible;
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.02) 0%, rgba(52, 199, 89, 0.01) 100%);
	border: 1px solid rgba(0, 122, 255, 0.05);
	position: relative;
}

.chart-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 30% 70%, rgba(0, 122, 255, 0.03) 0%, transparent 50%);
	pointer-events: none;
	z-index: 1;
}

.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 32rpx;
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.03) 100%);
	border-radius: 20rpx 20rpx 0 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 2;
}

.chart-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #1d1d1f;
	letter-spacing: -0.3rpx;
}

.detail-btn {
	padding: 8rpx 16rpx;
	background: linear-gradient(135deg, #007aff 0%, #5ac8fa 100%);
	color: white;
	border: none;
	border-radius: 12rpx;
	font-size: 20rpx;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.25);
	letter-spacing: 0.3rpx;
}

.detail-btn:hover {
	background: linear-gradient(135deg, #0056cc 0%, #4a9eff 100%);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.4);
}

.detail-btn:active {
	transform: translateY(0);
	box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}
</style>